import {useState, useEffect, useRef, useMemo} from "react";
import Child from "./G6";
import { Graph } from '@antv/g6';
import {flushSync} from 'react-dom';
let antG6Ref = null;
const Father = () => {
    console.log('Father-render ...');
    
    const [ary,setAry] = useState(()=>(['vue','react','angular']));
    const [loading,setLoading] = useState(false);

   const antG6BoxRef = useRef(null);
   const initGraph = () => {
    if(!antG6Ref) {
        antG6Ref = new Graph({
            container: antG6BoxRef.current,
            width: 500,
            height: 500,
            data: {
            nodes: [
                {
                id: 'node-1',
                style: { x: 50, y: 100 },
                },
                {
                id: 'node-2',
                style: { x: 150, y: 100 },
                },
            ],
            edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
            },
        });
        antG6Ref.render();
    }
    };

   useEffect(() => {
      initGraph();
      return () => {
        if (antG6Ref) {
            console.log('componentWillUnmount');
            
            antG6Ref.destroy();
            antG6Ref = null;
        }
      }
   }, []);

//    const getAryJsx = () => {
//         if(ary.length === 0) {
//             return <Child />
//         }
//         return ary.map((item,index)=>{
//             return <li key={index}>{item}</li>
//         })
//     }

    // const getAryJsx = useMemo(() => {
    //     if(ary.length === 0) {
    //         return <Child />
    //     }
    //     return ary.map((item,index)=>{
    //         return <li key={index}>{item}</li>
    //     })
    // })
    

       const GetAryJsx1 = () => {
        if(ary.length === 0) {
            return <Child />
        }
        return ary.map((item,index)=>{
            return <li key={index}>{item}</li>
        })
    }

    const getData = () => {
        new Promise((resolve,reject)=>{
           resolve(100)
        }).then((res)=>{
            flushSync(()=>{
                setAry([10,20,30]);
            });
            console.log(ary); // 旧数据， 拿的还是当前作用域里面的值， 拿不到最新的值， 用 useEffect去获取
            flushSync(()=>{
                setLoading(true);
            });
        })
    }


    const getData1 = () => {
        new Promise((resolve,reject)=>{
           resolve(100)
        }).then((res)=>{
            // 更新一次
            setAry([10,20,30]);
            setLoading(true);
        })
    }
   

    return (
        <>
            <div style={{height:300,overflow:'hidden'}}>
                <div  ref={antG6BoxRef} style={{width:'600px',height:'300px',border:'1px solid red'}}></div>
                   
            </div>
            <div>
                <ul>
                    {/* {getAryJsx()} */}
                    {/* {getAryJsx} */}

                    <GetAryJsx1 />
                </ul>
                <button onClick={()=>{
                    setAry([...ary,'jquery']);
                }}>添加</button>

                <button onClick={getData}>获取数据</button>
                <Child />
            </div>


        </>
    );
}



export default Father;